<template>
  <div class="header">
    <div class="img">
      <img src="@/assets/lglg.png" alt="">
    </div>
    <el-menu
      :default-active="this.$route.path"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      router
      background-color="#fff"
      text-color="#333"
      active-text-color="#0084ff"
      style="flex:1"
    >
      <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.barUrl">
        <template slot="title">
          <span> {{ item.barName }}</span>
        </template>
      </el-menu-item>
      <el-menu-item :index="''" style="margin-left: 300px">
        <ul class="top_list clearfix" v-if="userInfo">
          <li>
            <el-avatar :src="uimage" :size="60"></el-avatar>
          </li>
          <li class="s_left">
            <router-link :to="{path:'/personalCenter'}">个人中心</router-link>
          </li>
          <li><a href="javascript:" @click="signOut">退出</a></li>
        </ul>
        <ul class="top_list clearfix" v-else>
          <li class="s_left"><a href="#/logincenter" @click="login">登录</a></li>
          <li><a href="#/logincenter" @click="register">注册</a></li>
        </ul>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
  // import {serviceInfo, getNav} from '~/api/main.js'
  export default {
    data() {
      return {
        navList:[],
        ctrl:{
          loading: false
        },
        input1: '',
        userInfo:'',
        uimage:'',
        uid:''
      }
    },
    mounted() {
      this.userInfo = sessionStorage.getItem("user");
      this.uid = sessionStorage.getItem("uid");
      this.$axios.get(`teacher-front/demo/user/queryByUId?uid=${this.uid}`).then(d => {
        // console.log(d);
        this.uimage = d.data.uimage;
      }).catch(() => {
      })
      this.getList()
    },
    methods: {
      handleSelect(key, keyPath) {
      },
      signOut() {
        window.sessionStorage.clear();
        this.$router.push('logincenter')
      },
      login() {

      },
      register() {

      },
      onSubmit() {
        this.$router.push({ path: 'index/zonecourse', query: { zid: id }});
      },
      getList() {
        this.ctrl.loading = true;
        this.$axios.get(`education-system/sys/head-bar/getAllHeadBar`).then(d => {
          // console.log(d);
          this.navList = d.data.obj;
          this.ctrl.loading = false
        }).catch(() => {
          this.ctrl.loading = false
        })

      }
    }
  }
</script>
<style>
  .el-menu-item{
    font-size: 18px !important;
  }
  .el-menu-item.is-active {
    color: #ea5b2c !important;
    font-size: 18px !important;
  }
  .el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: 2px solid #ea5b2c !important;
  }
</style>
<style lang="scss" scoped>
  .header {
    display: flex;
    width: 100%;
    .img {
      background: #ffffff;
      border-bottom: solid 1px #e6e6e6;
      img {
        height:50px;
        padding:10px;
      }
    }
  }
  .top_list {
    float: right;
    li {
      list-style-type:none;
      float: left;
      color: #ccc;
      font-size: 12px;
      margin-top: 9px;
      padding: 0px 10px 0px 0px;
      position: relative;
      img {
        width: 14px;
        height: 13px;
        position: absolute;
        left: -20px;
      }
      .vip_icon {
        position: relative;
        left: 0;
        top: 1px;
        cursor: pointer;
      }
      a {
        color: #ccc;
        &:hover {
          text-decoration: none;
          color: #fff;
        }
        &.c_gold {
          color: #CA9E70;
        }
      }
      &.s_left {
        border-left: 1px solid #ccc;
        padding-left: 10px;
      }
    }
  }
</style>
